.lang-modal-fade-enter-active,
.lang-modal-fade-leave-active {
  transition: opacity 0.5s;
}

.lang-modal-fade-enter,
.lang-modal-fade-leave-to {
  opacity: 0;
}

.lang-modal-mask {
  position: fixed;
  inset: 0;
  z-index: var(--redirect-z-index);

  display: flex;
  align-items: center;
  justify-content: center;

  backdrop-filter: blur(10px);

  @media print {
    display: none;
  }
}

.lang-modal-wrapper {
  position: relative;
  z-index: 1500;

  overflow: hidden;

  max-width: 80vw;
  padding: 1rem 2rem;
  border-radius: 8px;

  background: var(--redirect-bg-color);
  box-shadow: 0 2px 6px 0 var(--card-shadow);
}

.lang-modal-action {
  display: block;

  width: 100%;
  margin: 1rem 0;
  padding: 0.5rem 0.75rem;
  border: none;
  border-radius: 8px;

  background-color: var(--redirect-bg-color-lighter);
  color: inherit;

  cursor: pointer;

  &:hover {
    background-color: var(--redirect-bg-color-light);
  }

  &.primary {
    background-color: var(--redirect-primary-color);
    color: var(--redirect-primary-text-color);

    &:hover {
      background-color: var(--redirect-primary-hover-color);
    }
  }
}
